<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>采用事件委托</title>
</head>
<body>
  <ul id="ul">
    <li>Hello</li>
    <li>I'm fine</li>
    <li>Thank you</li>
  </ul>
  <script>
    var list = document.querySelectorAll('li')
    // 通过事件对象打印文本内容
    function showTxt(ev) {
      console.log(ev.target.innerHTML)
    }

    // 暂不考虑事件兼容性
    // for (let item of list) {
    //   item.onclick = showTxt
    // }

    // 采用事件委托
    var ul = document.getElementById('ul')
    function showTxt2(ev) {
      var obj = ev.target
      // 判断点击的元素是否是li，若是再输出
      if (obj.nodeName.toLowerCase() === 'li') {
        console.log(obj.innerHTML)
      }
    }
    // 利用事件冒泡，因此是 true
    ul.addEventListener('click', showTxt2, true)

  </script>
</body>
</html>